<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模拟淘宝多规格选择</title>
    <link rel="stylesheet" href="css/vant.css" />
    <script src="js/vue.js"></script>
    <script src="js/vant.js"></script>
</head>
<body >
<div id="app">
    <button class="van-button van-button--danger van-button--block" @click="skushow=true">打开</button>
    <!-- 选择规格 弹框 -->
    <demo-block>
        <div class="sku-container">
            <van-sku
                    v-model="skushow"
                    stepper-title="选择数量"
                    :sku="skuData.sku"
                    :goods="skuData.goods_info"
                    :goods-id="skuData.goods_id"
                    :quota="skuData.quota"
                    :initial-sku="skuData.selectedSkuComb"
                    show-add-cart-btn
                    reset-stepper-on-hide
                    @buy-clicked="onBuyClicked"
                    @add-cart="onAddCartClicked"
            >
                <!--<template
                        slot="sku-header-price"
                        slot-scope="props"
                >
                    <div class="van-sku__goods-price">
                        <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
                    </div>
                </template>-->
            </van-sku>
        </div>
    </demo-block>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            skushow: false,//规格选择弹层;
            cartPartm:{
                item_id:'',
                sku_id:"",
                total: 0,
                is_fast:0,
            },
            //虚拟 商品规格;
            skuData: {
                // 商品 id
                // goodsId: '946755',
                initialSku:'946755',
                goods_id: '2257',
                goods_info: {
                    id: '2257', //   id
                    price: 200,
                    title: 'xxxefdfdf名称名称....', //  名称
                    imgUrl: 'https://img.yzcdn.cn/2.jpg' // 规格类目图片，只有第一个规格类目可以定义图片
                },
                quota:300,
                // 选择的商品数量
                selectedNum: 1,
                // 默认选择的 sku 组合
                selectedSkuComb: {
                    id: '2257',
                    price: 100,
                    s1: '30349',
                    s2: '1193',
                    s3: '0',
                    stock_num: 111
                },
                sku: {
                    // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                    // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                    tree: [
                        {
                            k: '颜色', // skuKeyName：规格类目名称
                            v: [
                                {
                                    id: '30349', // skuValueId：规格值 id
                                    name: '红色', // skuValueName：规格值名称
                                    imgUrl: 'https://img.yzcdn.cn/2.jpg' // 规格类目图片，只有第一个规格类目可以定义图片
                                },
                                {
                                    id: '121500',
                                    name: '蓝色',
                                    imgUrl: 'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg'
                                },
                                {
                                    id: '1215', // skuValueId：规格值 id
                                    name: '白色', // skuValueName：规格值名称
                                    imgUrl: 'http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg' // 规格类目图片，只有第一个规格类目可以定义图片
                                },
                            ],
                            k_s:'s1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                        },
                        {
                            k: '尺寸', // skuKeyName：规格类目名称
                            v: [
                                {
                                    id: '1193', // skuValueId：规格值 id
                                    name: '100*100', // skuValueName：规格值名称
                                    imgUrl: 'http://pic.58pic.com/58pic/14/03/02/58V58PICTFk_1024.jpg' // 规格类目图片，只有第一个规格类目可以定义图片
                                },
                                {
                                    id: '119301', // skuValueId：规格值 id
                                    name: '100*200', // skuValueName：规格值名称
                                    imgUrl: 'https://img.yzcdn.cn/2.jpg' // 规格类目图片，只有第一个规格类目可以定义图片
                                },
                                {
                                    id: '119302',
                                    name: '200*200',
                                    imgUrl: 'https://img.yzcdn.cn/2.jpg'
                                },
                                {
                                    id: '119303', // skuValueId：规格值 id
                                    name: '300*300', // skuValueName：规格值名称
                                    imgUrl: 'https://img.yzcdn.cn/1.jpg' // 规格类目图片，只有第一个规格类目可以定义图片
                                },
                            ],
                            k_s: 's2',
                        }
                    ],
                    // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                    list: [
                        {
                            id: "2257", // skuId，下单时后端需要
                            price: 100, // 价格（单位分）
                            s1: '121500', // 规格类目 k_s 为 s1 的对应规格值 id
                            s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
                            s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                            stock_num: 110 // 当前 sku 组合对应的库存
                        },
                        {
                            id: "2257", // skuId，下单时后端需要
                            price: 567, // 价格（单位分）
                            s1: '121500', // 规格类目 k_s 为 s1 的对应规格值 id
                            s2: '119301', // 规格类目 k_s 为 s2 的对应规格值 id
                            s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                            stock_num: 110 // 当前 sku 组合对应的库存
                        },
                        {
                            id: "2257", // skuId，下单时后端需要
                            price: 345, // 价格（单位分）
                            s1: '121500', // 规格类目 k_s 为 s1 的对应规格值 id
                            s2: '119302', // 规格类目 k_s 为 s2 的对应规格值 id
                            s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                            stock_num: 110 // 当前 sku 组合对应的库存
                        },
                        {
                            id: "2257", // skuId，下单时后端需要
                            price: 345, // 价格（单位分）
                            s1: '121500', // 规格类目 k_s 为 s1 的对应规格值 id
                            s2: '119303', // 规格类目 k_s 为 s2 的对应规格值 id
                            s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                            stock_num: 110 // 当前 sku 组合对应的库存
                        },
                        {
                            id: "2257", // skuId，下单时后端需要
                            price: 238, // 价格（单位分）
                            s1: '30349', // 规格类目 k_s 为 s1 的对应规格值 id
                            s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
                            s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                            stock_num: 110 // 当前 sku 组合对应的库存
                        },
                        {
                            id: "2257", // skuId，下单时后端需要
                            price: 250, // 价格（单位分）
                            s1: '30349', // 规格类目 k_s 为 s1 的对应规格值 id
                            s2: '119303', // 规格类目 k_s 为 s2 的对应规格值 id
                            s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                            stock_num: 150 // 当前 sku 组合对应的库存
                        },
                        {
                            id: "2257", // skuId，下单时后端需要
                            price: '300', // 价格（单位分）
                            s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
                            s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
                            s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                            stock_num: 110 // 当前 sku 组合对应的库存
                        },
                        {
                            id: "2257", // skuId，下单时后端需要
                            price: '200', // 价格（单位分）
                            s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
                            s2: '119303', // 规格类目 k_s 为 s2 的对应规格值 id
                            s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                            stock_num: 110 // 当前 sku 组合对应的库存
                        },
                        {
                            id: "2257", // skuId，下单时后端需要
                            price: 200, // 价格（单位分）
                            s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
                            s2: '119302', // 规格类目 k_s 为 s2 的对应规格值 id
                            s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                            stock_num: 110 // 当前 sku 组合对应的库存
                        },
                        {
                            id: "2257", // skuId，下单时后端需要
                            price:300, // 价格（单位分）
                            s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
                            s2: '119301', // 规格类目 k_s 为 s2 的对应规格值 id
                            s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                            stock_num: 130 // 当前 sku 组合对应的库存
                        },
                    ],
                    price: '100', // 默认价格（单位元）
                    stock_num: 227, // 商品总库存
                    collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                    none_sku: false, // 是否无规格商品
                    hide_stock: true // 是否隐藏剩余库存
                }
            }
        },
        methods:{
            //立即购买;
            onBuyClicked: function (items_id,sku_id,total,isfast) {
                var that = this;
                that.aboutAddClicked(items_id,sku_id,total,isfast);
            },
            //加入购物车;
            onAddCartClicked: function (items_id,sku_id,total,isfast) {
                var that = this;
                that.aboutAddClicked(items_id,sku_id,total,isfast);
            },
            //购物请求封装
            aboutAddClicked: function (items_id,sku_id,total,isfast) {
                var that =this;
                that.cartPartm.item_id = items_id;
                that.cartPartm.sku_id = sku_id;
                that.cartPartm.total = total;
                that.cartPartm.is_fast = isfast;
                console.log(that.cartPartm);
            },
        }
    })
</script>
</body>
</html>